<template>
	<view class="container">
		<view class="form-container">
			<uni-data-select v-model="value" :localdata="range" @change="change" :clear="false"
				v-if="saveOreditStatus == 2"></uni-data-select>
			<view class="form-item">
				<view class="label">品牌</view>
				<view class="value" v-if="saveOreditStatus == 1">{{printerInfo.print_name}}</view>
				<view class="value" v-if="saveOreditStatus == 2">{{printerInfo.title}}</view>
			</view>
			<view class="form-item">
				<view class="label">名称</view>
				<input type="text" v-model="params.title" placeholder="请输入打印机名称"></input>
			</view>
			<view class="form-item">
				<view class="label">关联门店</view>
				<view class="value" v-if="saveOreditStatus == 1">
					<picker @change="bindStoreChange" :value="storeIndex" :range="storeList">
						{{storeList[storeIndex]}}
						<uni-icons type="down" size="15"></uni-icons>
					</picker>
				</view>
				<view class="value" v-if="saveOreditStatus == 2">
					{{storeList[storeIndex]}}
				</view>
			</view>
			<view class="form-item">
				<view class="label">终端号</view>
				<view class="input-container">
					<input type="text" v-model="params.machine_code" placeholder="请输入打印机终端号" class="input"></input>
					<uni-icons type="scan" color="#000000" size="22" @tap="startScan"></uni-icons>
				</view>
			</view>
			<view class="form-item">
				<view class="label">密钥</view>
				<input type="text" v-model="params.machine_sceret" placeholder="请输入打印机密钥"></input>
			</view>
			<!-- <view class="form-item">
				<view class="label">打印数量</view>
				<view class="value">
					<picker @change="printnumsChange" :value="printnumsIndex" :range="printnumsList">
						<text>{{printnumsList[printnumsIndex]}}</text>
						<uni-icons type="down" size="15"></uni-icons>
					</picker>
				</view>
			</view> -->
			<view class="form-item">
				<view class="label">小票宽度</view>
				<view class="value">58mm</view>
			</view>
			<view class="form-item">
				<view class="label">打印模板</view>
				<view class="value" @click="showPopup">
					<text>{{ selectedTemplates.join(', ') || '请选择模板' }}</text>
					<uni-icons type="down" size="15"></uni-icons>
				</view>
			</view>
			<view class="form-item">
				<view class="label">音量大小</view>
				<view class="value">
					<picker @change="soundChange" :value="soundIndex" :range="soundList">
						<text>{{soundList[soundIndex]}}</text>
						<uni-icons type="down" size="15"></uni-icons>
					</picker>
				</view>
			</view>
			<view class="form-item">
				<view>
					<view class="label">默认打印机</view>
					<view class="tip">开启后，新增发货店铺将自动绑定该打印机</view>
				</view>
				<switch :checked="isDefaultPrinter" @change="handleDefaultPrinterChange" style="transform:scale(0.8)">
				</switch>
			</view>
			<button type="primary" @click="save">保存</button>
		</view>
		<uni-popup ref="popup" type="center">
			<view class="popup-content">
				<view class="popup-title">如何获取{{printerInfo.print_name}}打印机编号</view>
				<view class="popup-message">
					<view class="">1、扫描底部标签上二维码</view>
					<view style="margin-top: 20rpx;">2、如找不到请联系{{printerInfo.print_name}}客服获取</view>
				</view>
				<button type="primary" @click="startScan">开始扫码</button>
			</view>
		</uni-popup>
		<uni-popup ref="templitPopup" type="bottom" :safe-area="false">
			<view class="template-content">
				<view class="template-header">
					<text>选择模板</text>
				</view>
				<view class="template-body">
					<checkbox-group @change="checkboxChange">
						<label class="templateLabel" v-for="item in templateList" :key="item.id">
							<view>{{item.title}}</view>
							<checkbox :value="item.id" :checked="selectedTemplates.includes(item.title)"
								style="transform:scale(0.7)" />
						</label>
					</checkbox-group>
				</view>
				<view class="template-footer">
					<button @click="closetemplatPopup">确定</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>
<script>
	import {
		templatesList,
		storesList,
		addStorePrinter,
		editStorePrinter,
		deleteStorePrinter,
		testPrinter,
		cancelall
	} from "@/api/userApi/user.js"
	export default {
		data() {
			return {
				params: {
					id: '',
					print_brand_id: '',
					machine_code: '',
					title: '',
					store_id: '',
					machine_sceret: '',
					print_nums: 1,
					template_ids: [],
					sound_adjust: 1,
					default: 1
				},
				printnumsIndex: 0,
				printnumsList: ['1联', '2联', '3联', '4联', '5联'],
				templateIndex: 0,
				templateList: [],
				soundIndex: 1,
				soundList: ['静音', '小', '中', '大'],
				printerInfo: {},
				isDefaultPrinter: false,
				storeIndex: '',
				storeList: [],
				selectedTemplates: [],
				saveOreditStatus: null,
				value: 0,
				range: [{
						value: 0,
						text: "删除"
					},
					{
						value: 1,
						text: "清空"
					},
					{
						value: 2,
						text: "测试"
					},
				],
				id: ''
			};
		},
		methods: {
			change(e) {
				if (e == 0) {
					// 删除
					deleteStorePrinter({
						id: this.id
					}).then(res => {
						if (res.code == 200) {
							uni.showToast({
								icon: "none",
								title: "删除成功"
							})
							setTimeout(() => {
								uni.navigateBack({
									delta: 2
								})
							}, 1000)
						}
					})
				}
				if (e == 1) {
					// 清空
					cancelall({
						id: this.id
					}).then(res => {
						if (res.code == 200) {
							uni.showToast({
								icon: "none",
								title: "清空成功"
							})
							setTimeout(() => {
								uni.navigateBack({
									delta: 2
								})
							}, 1000)
						}
					})
				}
				if (e == 2) {
					// 测试
					testPrinter({
						id: this.id
					}).then(res => {})
				}
			},
			openProp() {
				this.$refs.popup.open()
			},
			bindStoreChange(e) {
				this.storeIndex = e.detail.value;
				this.params.store_id = this.getStoreIdByIndex(this.storeIndex);
			},
			getStoreIdByIndex(index) {
				return this.apiData.data.list[index].id;
			},
			printnumsChange(e) {
				const index = Number(e.detail.value);
				this.params.print_nums = index + 1;
				this.printnumsIndex = index;
			},
			showPopup() {
				this.$refs.templitPopup.open();
			},
			closetemplatPopup() {
				this.$refs.templitPopup.close();
			},
			checkboxChange(e) {
				this.params.template_ids = e.detail.value;
				const selectedTemplateIds = e.detail.value;
				this.selectedTemplates = [];
				if (selectedTemplateIds.includes('1')) {
					this.selectedTemplates.push('通知单');
				}
				if (selectedTemplateIds.includes('2')) {
					this.selectedTemplates.push('制作单');
				}
				if (selectedTemplateIds.includes('3')) {
					this.selectedTemplates.push('取消单');
				}
				if (selectedTemplateIds.includes('4')) {
					this.selectedTemplates.push('客催单');
				}
			},
			soundChange(e) {
				const index = Number(e.detail.value);
				this.params.sound_adjust = index
				this.soundIndex = index
			},
			handleDefaultPrinterChange(e) {
				if (e.detail.value) {
					this.params.default = 1
				} else {
					this.params.default = 0
				}

			},
			getTemplatesList() {
				templatesList().then(res => {
					if (res.code == 200) {
						this.templateList = res.data;
					}
				})
			},
			getStoreList() {
				storesList().then(res => {
					if (res.code == 200) {
						this.apiData = res;
						this.storeList = res.data.list.map(item => item.store_name);
						if (this.printerInfo.store_id) {
							const currentStore = res.data.list.find(store => store.id === this.printerInfo
								.store_id);
							if (currentStore) {
								this.storeIndex = this.storeList.indexOf(currentStore.store_name);
							}
						}
					}
				})
			},
			save() {
				if (this.params.store_id == '') {
					uni.showToast({
						icon: "none",
						title: "请选择门店"
					})
					return
				}
				if (this.params.machine_code == '') {
					uni.showToast({
						icon: "none",
						title: "终端号不能为空"
					})
					return
				}
				if (this.params.machine_sceret == '') {
					uni.showToast({
						icon: "none",
						title: "密钥不能为空"
					})
					return
				}
				if (this.params.template_ids.length == 0) {
					uni.showToast({
						icon: "none",
						title: "请选择模板"
					})
					return
				}
				if (this.saveOreditStatus == 1) {
					addStorePrinter(this.params).then(res => {
						if (res.code == 200) {
							uni.showToast({
								icon: "none",
								title: "添加成功"
							})
							setTimeout(() => {
								uni.navigateBack({
									delta: 2
								})
							}, 1000)
						}
					})
				} else {
					editStorePrinter(this.params).then(res => {
						if (res.code == 200) {
							uni.showToast({
								icon: "none",
								title: "编辑成功"
							})
							setTimeout(() => {
								uni.navigateBack({
									delta: 2
								})
							}, 1000)
						}
					})
				}

			},
			startScan() {
				uni.scanCode({
					autoZoom: true,
					success: (res) => {
						console.log(res);
						if(this.printerInfo.print_name == '易联云'){
							res.result = JSON.parse(res.result)
							this.params.machine_code = res.result.machineCode
							this.params.machine_sceret = res.result.msign
						}
						if(this.printerInfo.print_name == '飞鹅' || this.printerInfo.print_name == '商鹏'){
							res.result = res.result.split(':');
							this.params.machine_code = res.result[0]
							this.params.machine_sceret = res.result[1]
						}
						if(this.printerInfo.print_name == '大趋智能'){
							res.result = res.result.split(',');
							this.params.machine_code = res.result[0]
							this.params.machine_sceret = res.result[1]
						}
						if(this.printerInfo.print_name == '芯烨云'){
							this.params.machine_code = res.result
						}
						this.closePopup()
					},
					fail: (err) => {
						this.closePopup()
					}
				});
			},
			closePopup() {
				this.$refs.popup.close();
			},
		},
		onLoad(options) {
			this.printerInfo = JSON.parse(options.val);
			this.saveOreditStatus = options.type;
			if (options.type == 1) {
				this.openProp();
				this.params.title = this.printerInfo.print_name;
				this.params.print_brand_id = this.printerInfo.id;
				this.getTemplatesList();
				this.getStoreList();
			} else {
				this.id = this.printerInfo.id;
				this.params.id = this.printerInfo.id;
				this.params.title = this.printerInfo.title;
				this.params.print_brand_id = this.printerInfo.print_brand_id;
				this.params.machine_code = this.printerInfo.machine_code;
				this.params.store_id = this.printerInfo.store_id;
				this.params.machine_sceret = this.printerInfo.machine_sceret;
				this.params.print_nums = this.printerInfo.print_nums;
				this.params.sound_adjust = this.printerInfo.sound_adjust;
				if (this.printerInfo.default == 1) {
					this.isDefaultPrinter = true
				} else {
					this.isDefaultPrinter = false
				}
				this.params.default = this.printerInfo.default;
				this.params.template_ids = this.printerInfo.template_ids;
				this.getTemplatesList();
				this.getStoreList();
				this.storeIndex = this.storeList.findIndex(store => store.id === this.printerInfo.store_id);
				this.selectedTemplates = [];
				if (this.params.template_ids.includes('1')) {
					this.selectedTemplates.push('通知单');
				}
				if (this.params.template_ids.includes('2')) {
					this.selectedTemplates.push('制作单');
				}
				if (this.params.template_ids.includes('3')) {
					this.selectedTemplates.push('取消单');
				}
				if (this.params.template_ids.includes('4')) {
					this.selectedTemplates.push('客催单');
				}
			}
		}
	};
</script>

<style lang="scss">
	page {
		background: #f5f5f5;
	}

	.container {
		padding: 20rpx;


		.form-container {
			width: 92%;
			margin-top: 20rpx;

			::v-deep .uni-stat__select {
				width: 17%;
				margin-left: auto;

			}

			::v-deep .uni-select {
				border: 0;
				border: none;
				border-bottom: 0;
				color: #000;
				font-weight: bold;
			}

			.form-item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 30rpx 0;
				border-bottom: 1rpx dashed #9d9d9d;

				.label {
					font-weight: 400;
					font-size: 29rpx;
					color: #333333;
				}

				.input-container {
					display: flex;
					align-items: center;
					padding: 10rpx 0;
					width: 60%;
				}

				.value {
					font-weight: 400;
					font-size: 25rpx;
					color: #333333;

					text {
						font-size: 25rpx;
						font-weight: 400;
						color: #000;
						margin-right: 10rpx;
					}
				}

				.picker {
					display: flex;
					align-items: center;
				}

				.tip {
					font-weight: 400;
					font-size: 24rpx;
					color: #999999;
				}
			}

			input {
				padding: 10rpx 0;
				width: 50%;
				font-weight: 400;
				font-size: 25rpx;
				color: #666666;
				text-align: right;
			}

			.input {
				flex: 1;
				border: none;
				padding: 0;
				margin-right: 10rpx;
				margin-bottom: 0;
			}

			button {
				width: 600rpx;
				height: 94rpx;
				background: linear-gradient(90deg, #4876FF 0%, #5260FF 100%);
				box-shadow: 0rpx 7rpx 16rpx 0rpx rgba(0, 38, 188, 0.29);
				border-radius: 74rpx 74rpx 74rpx 74rpx;
				margin-top: 40rpx;
				padding: 15rpx 0;
				font-size: 28rpx;
			}
		}

		.popup-content {
			width: 600rpx;
			background-color: #fff;
			border-radius: 30rpx;
			padding: 30rpx;
			// text-align: center;

			.popup-title {
				font-size: 36rpx;
				font-weight: bold;
				color: #3385FF;
				margin-bottom: 40rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.popup-message {
				font-size: 29rpx;
				color: #333;
				margin-bottom: 30rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
			}

			button {
				width: 380rpx;
				height: 94rpx;
				background: linear-gradient(90deg, #4876FF 0%, #5260FF 100%);
				box-shadow: 0rpx 7rpx 16rpx 0rpx rgba(0, 38, 188, 0.29);
				border-radius: 74rpx 74rpx 74rpx 74rpx;
				margin-top: 40rpx;
			}

			.popup-close-btn {
				position: absolute;
				top: 20rpx;
				right: 20rpx;
			}
		}

		.template-content {
			background-color: #fff;
			border-top-left-radius: 20px;
			border-top-right-radius: 20px;
			padding: 20px;
			height: 40vh;

			.template-header {
				text-align: center;
				font-size: 20px;
				margin-bottom: 20px;
			}

			.template-body {
				margin-bottom: 20px;

				.templateLabel {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-top: 10rpx;

					view {
						font-weight: 400;
						font-size: 29rpx;
						color: #333333;
					}
				}
			}

			.template-footer {
				text-align: center;
				margin-top: 110rpx;
			}

			.template-footer button {
				background-color: #1aad19;
				color: #fff;
				border: none;
				background: linear-gradient(90deg, #4876FF 0%, #5260FF 100%);
				box-shadow: 0rpx 7rpx 16rpx 0rpx rgba(0, 38, 188, 0.29);
				border-radius: 40rpx;
			}
		}


	}
</style>